<template>
  <div class="all-imgs">
    <div class="all-title">
      <div 
        @click="back"
        style="width: 50px;color: rgb(250,140,20);position: absolute;background-color: white;right: 320px;text-align: right;cursor: pointer;">返回</div>
      <div class="left-line"></div>
      <div class="title-text">车辆信息</div>
      <div class="right-line"></div>
    </div>
    <div class="box-1">
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[8] == null" 
              @click="addImg(8)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_11.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[8]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            驾驶证正本
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[10] == null" 
              @click="addImg(10)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[10]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            行驶证正本
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[11] == null" 
              @click="addImg(11)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[11]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            交强险
          </div>
        </div>
      </div>
    </div>
    <div class="box-1">
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[2] == null" 
              @click="addImg(2)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_11.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[2]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            整车铭牌
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[3] == null" 
              @click="addImg(3)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[3]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            底盘铭牌
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[12] == null" 
              @click="addImg(12)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[12]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            商业险
          </div>
        </div>
      </div>
    </div>
    
    <div class="all-title">
      <div class="left-line"></div>
      <div class="title-text">车身外观</div>
      <div class="right-line"></div>
    </div>
    <div class="box-1">
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[5] == null" 
              @click="addImg(5)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_11.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[5]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            车头测45度
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[7] == null" 
              @click="addImg(7)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[7]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            车尾侧45度
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[13] == null" 
              @click="addImg(13)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[13]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            正面侧90度
          </div>
        </div>
      </div>
    </div>
    <div class="box-1">
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[4] == null" 
              @click="addImg(4)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_11.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[4]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            车头正面
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[6] == null" 
              @click="addImg(6)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[6]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            车尾正面
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[15] == null" 
              @click="addImg(15)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[15]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            驾驶室内全景
          </div>
        </div>
      </div>
    </div>
    <div class="all-title">
      <div class="left-line"></div>
      <div class="title-text">详细照片</div>
      <div class="right-line"></div>
    </div>
    <div class="box-1">
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[16] == null" 
              @click="addImg(16)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_11.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[16]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            操作台
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[17] == null" 
              @click="addImg(17)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[17]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            控制器
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[18] == null" 
              @click="addImg(18)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[18]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            细节功能
          </div>
        </div>
      </div>
    </div>
    <div class="box-1">
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[19] == null" 
              @click="addImg(19)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_11.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[19]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            细节功能
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[20] == null" 
              @click="addImg(20)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[20]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            细节功能
          </div>
        </div>
      </div>
      <div class="box-1-info">
        <div>
          <div style="width: 110px;height: 110px;">
            <img 
              v-if="imgs[21] == null" 
              @click="addImg(21)"
              style="width: 100%;height: 100%;" 
              src="../../../assets/images/carinfologo_5.png" />
            <el-image
              v-else
              style="width: 100%;height: 100%;"
              fit="cover"
              :src="imgs[21]"
              :preview-src-list="showImgs"
            ></el-image>
          </div>
          <div class="img-title">
            细节功能
          </div>
        </div>
      </div>
    </div>
    <input @change="uploadImg" type="file" id="truckFile" style="display: none;" />
  </div>
</template>

<script>
  import $ from 'jquery';
  import {uploadTruckImg} from '@/api/workspace/uploadFile'
  import {getCarInfo} from '@/api/workspace/work_order'
  export default {
    props:{
      data:Object
    },
    data() {
      return {
        imgs:[],
        showImgs:[],
        type:-1,
        info:{}
      }
    },
    created() {
      this.load();
    },
    methods:{
      load:function() {
        var that = this;
        // console.log(that.data);
        if(typeof that.data.carInfoId == 'undefined'){
          
          that.$router.push({
            path:'/main/settlement/pick_info',
            query:{
              id:that.$route.query.id
            }
          })
          return;
        }
        getCarInfo({id:that.data.carInfoId}).then(response => {
          var _data = response.data;
          // console.log(_data)
          if(_data.status == 200){
            var imgs = _data.data.img;
            var imgUrls = [];
            for(var img of imgs) {
              imgUrls[img.type] = img.imgUrl;
            }
            that.info = _data.data;
            that.showAllImgs(imgUrls);
            that.imgs = imgUrls;
          }else {
            that.$message({
              message:_data.msg,
              showClose:true,
              type:'error',
              offset:'100'
            })
          }
        }).catch(error => {
          alert('网络错误');
          console.log(error)
        })
      },
      showAllImgs:function (imgs) {
        var tmp = [8,10,11,2,3,12,5,7,13,4,6,15,16,17,18,19,20,21]
        var show = [];
        for(let img of tmp) {
          if(imgs[img] != null) {
            show.push(imgs[img]);
          }
        }
        this.showImgs = show;
        console.log(this.showImgs)
      },
      back:function() {
        this.$router.go(-1);
      },
      addImg:function(type) {
        this.type = type;
        $('#truckFile').click();
      },
      uploadImg:function(e) {
        var that = this;
        var data = new FormData();
        data.append('file',e.target.files[0]);
        data.append('type',this.type);
        var imgs = this.imgs;
        uploadTruckImg(data,this.info.id).then(response => {
          var _data = response.data;
            // console.log(_data);
          if(_data.code == 200) {
            imgs[that.type] = _data.data;
            that.showAllImgs(imgs);
          }else {
            that.$message.error(_data.message);
          }
        }).catch(error => {
          that.$message.error('发生错误');
          console.log(error);
        })
      }
    }
  }
</script>

<style>
  .all-imgs {
    width: 100%;
    height: 100%;
    background-color: white;
    overflow-y: auto;
  }
  .box-1 {
    /* padding: 0 3px; */
    /* height: 110px; */
    /* overflow: hidden; */
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .box-1>.box-1-info {
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    float: left;
    cursor: pointer;
  }
  .img-title {
    position: relative;
    top: -35px;
    height: 35px;
    border-radius: 0 0 6px 6px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 12px;
    line-height: 35px;
    text-align: center;
  }
  .all-title {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 10px 0;
  }
  .left-line {
    width: 261px;
    height: 10px;
    border-bottom: 1px dashed rgba(170, 170, 170, 1);
  }
  .title-text {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    font-weight: 550;
  }
  .right-line {
    width: 20px;
    height: 10px;
    border-bottom: 1px dashed rgba(170, 170, 170, 1);
  }
</style>
